import React from "react";
import "./Main.css";
import axios from "axios";
import { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
export default function MainSearch({data}){
    const params=useParams()
    const {query} =params
    console.log(query);

    let b=(
        <div className="Main-search">
          <div className="Search-result">
            <span>共找到&nbsp;</span>
            <span className="Search-count">{data.filter(
      (item) => {
        return item.title.indexOf(query)!==-1;
      }).length}</span>
            <span>&nbsp;个“</span>
            <span className="Search-key">{query}</span>
            <span>”相关视频</span>
          </div>
          {data.filter(
      (item) => {
        return item.title.indexOf(query)!==-1;
      })
    .map((item)=>{
            return (
                <div className="Result-item">
                    <div className="First-lesson-count">
                        12节
                    </div>
            <div className="Result-item-left">
              <div className="Item-img"><img src={item.cover}/></div>
              <div className="Bottom-count">{item.playCount}次播放</div>
            </div>
            <div className="Result-item-right">
              <div className="Right-item-first">{item.title}</div>
              <div className="Right-item-second">
                <span>Hzero企业版</span>
                <span>赋能培训</span>
              </div>
              <div className="Right-item-third">
                {item.des}
              </div>
            </div>
          </div>
            )
          })}
          
        </div>
      );
      return b;
}